<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('申请审批')"></head>
<head>
  <link rel="stylesheet" th:href="@{/css/back/back-see-all-question.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="~{/common/common :: common_header_back('','申请审批')}"></header>

<article>
  <!-- 侧边栏部分 -->
  <nav th:include="~{/common/common :: common_left_nav('','')}"></nav>
  <!-- 显示内容的部分 -->
  <div class="context-wrap">
    <!-- 按照指定的内容搜索 -->
    <div class="demoTable">
      请输入用户名：
      <div class="layui-inline">
        <input class="layui-input" id="search" autocomplete="off">
      </div>
      <button class="layui-btn" id="search-button" data-type="reload">搜索</button>
    </div>
    <!-- 数据表格 -->
    <table class="layui-hide" id="user-table" lay-filter="user-table"></table>

    <!-- 操作按钮 -->
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="approve">审批</a>
    </script>

  </div>
</article>

</body>
</html>
<script>
  layui.use(['element','table'], function(){
    let table = layui.table;
    let form = layui.form;
    let $ = layui.$;
    let layer = layui.layer;
    table.render({
      elem: '#user-table'
      ,url:'/user/getApproveUser'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print']
      ,title: '用户数据表'
      ,cols: [
              [
        {title:'序号',type:"numbers", unresize: false,width:80}
        ,{field:'userAccount', title:'账号', width:135}
        ,{field:'userName', title:'用户名', width:135}
        ,{field:'userPhone', title:'电话号', width:135}
        ,{field:'userNumber', title:'身份证号', width:280}
        ,{field:'userEmail', title:'邮箱', width:280}
        ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
      ]
      ]
      ,id: 'userTable'
      ,limits:[2,4,6,8,10]
      ,page: true
    });

    //数据表格头部的按钮事件
    table.on('toolbar(user-table)', function(obj){
      switch(obj.event){

        case 'delete-question':
          layer.alert('审批管理员');
          break;

      };
    });



    //搜索之后数据表格重载
    $("#search-button").on("click",function (){
      //执行重载
      table.reload('userTable', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          search: $("#search").val(),
        }
      });user-table
    });





    //监听行工具事件
    table.on('tool(user-table)', function(obj){
      let data = obj.data;

      //删除指定行数据
      if(obj.event == 'approve'){
        $.ajax({
          url: '/user/setApproveUser',
          data: {
            userId: data.userId,
          },
          dataType: 'JSON',
          success: function (res){
            if (res == 1){
              layer.msg("审批成功");
            }
            //执行重载
            table.reload('userTable', {
              page: {
                curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
              }
            });
          }
        },JSON)
      }

    });
  });

</script>